<template>
  <div class="app-container" style="display:flex;">
    <div style="width: 75%;">
      <div class="filter-container">
        <div v-if="dhstatus ==true" class="filter-container" style="font-size: 14px; width: 100%; display: flex;">
          <div style="width: 100%;display: flex;     justify-content: space-between;">
            <div style="display: flex;">
              <div> 档号：<span style="color: rgb(144, 147, 153);">{{ dh }}</span></div>
              <div>
                <el-button type="primary" size="mini" plain style="margin-left: 5px; padding: 3px 3px; height: 22px"
                  @click="skip(dh)">
                  查看档案
                </el-button>
              </div>
            </div>
            <div>
              <div>
                <el-radio-group v-model="radio1" size="mini" @change="handleRadioChange">
                  <el-radio-button size="mini" label="一度关系" />
                  <el-radio-button size="mini" label="二度关系" />
                </el-radio-group>
              </div>
            </div>
          </div>
          <el-tooltip class="item" effect="dark" :content="this.content" placement="top-start">
            <div
              style="margin-top: 10px;  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;"
              class="ellipsis-multiline">
              内容：<span style="color: rgb(144, 147, 153);">{{ content }}</span>
            </div>
          </el-tooltip>
        </div>
        <el-form v-if="dhstatus==false" ref="dataForm" size="mini" :model="listQuery" label-position="right"
          label-width="auto" style="width: 100%;">
          <div style="    width: 100%;display: flex;justify-content: space-between;align-items: center;">
            <div>
              <div class="lineBox">
                <el-form-item label="实体名称" prop="name">
                  <el-input v-model="listQuery.name" size="mini" placeholder="" style="width: 120px;" />
                </el-form-item>
              </div>
              <div class="lineBox">
                <el-button size="mini" type="primary" icon="el-icon-search" native-type="submit" @click="handleFilter">
                  模糊查询
                </el-button>
              </div>
            </div>
            <div>
              <el-radio-group v-model="radio2" size="mini" @change="handleRadioChang2">
                <el-radio-button size="mini" label="一度关系" />
                <el-radio-button size="mini" label="二度关系" />
              </el-radio-group>
            </div>
          </div>
        </el-form>
      </div>

      <div class="myTable1">
        <div id="main" ref="chart" style="min-height:650px; width: 100%;" />
      </div>
    </div>
    <div style="width: 25%; margin-left: 10px; min-height:650px;padding: 20px 5px 0px 5px;" class="myTable1">
      <div style="font-size: 14px;font-weight: bold;">
        {{ nodeName }}
      </div>
      <div style="font-size: 12px; margin-top: 10px; display: flex; ">
        <el-tag v-if="type" type="success" size="mini">
          {{ type }}
        </el-tag>

        <el-link v-if="type.split('.')[1]=='Organization' || type.split('.')[1]=='Person'"
          style="margin-left: 10px;  font-size: 12px; "
          :href="`/modelsknowledge/institutionalchronicle?project_id=${project_id}&title=${nodeName}`" target="_blank"
          type="primary" class="always-underlined">
          相关事件时间轴
        </el-link>
      </div>
      <div class="bixi-group-container-title">
        <div class="bixi-group-container-blue-block" /><label class="groupcontainer-title-F4sp83QczG">文档溯源</label><span
          class="bixi-group-container-description" />
        <div style="margin-left: 8px;  min-height:150px;overflow-y:auto; max-height: 200px;">
          <div v-if="dhtitleList.length>0">
            <div v-for="(item,index) in dhtitleList" :key="index" class="dhtitle">
              {{ index+1 }}. <el-link class="always-underlined" :href="`/dashboard/docview?id=${item.id}`"
                target="_blank" type="primary">
                {{ item.dh }}
              </el-link>
            </div>
          </div>
          <div v-else
            style="text-align: center;    color: #909399;    font-weight: normal !important;font-size: 12px;    line-height: 60px;">
            可点图谱中实体加载
          </div>
        </div>
      </div>
      <div class="bixi-group-container-title">
        <div class="bixi-group-container-blue-block" /><label class="groupcontainer-title-F4sp83QczG">属性信息</label><span
          class="bixi-group-container-description" />
        <div style="margin-left: 8px;">
          <el-table :data="tableData" border style="width: 100%; min-height: 100px;" :show-header="false"
            empty-text="可点图谱中实体加载">
            <el-table-column prop="zd" label="id" width="100">
              <template slot-scope="{row,$index}">
                <div class="custom-font">
                  {{ row.zd }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="value" show-overflow-tooltip label="value">
              <template slot-scope="{row,$index}">
                <div class="custom-font">
                  {{ row.value }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { artApi } from '@/api/art'
import { questionsanswersApi } from '@/api/questionsanswers'

export default {

  data() {
    return {
      radio1: '一度关系',
      radio2: '一度关系',
      project_id: null,
      content: "",

      dhstatus: false,
      dh: "",
      nodeName: "",
      type: "",
      dhtitleList: [],
      tableData: [],
      selectedNode: null,
      listLoading: false,
      listQuery: {},
      options: {
        title: {
          text: '',
          textStyle: {
            color: 'white',
          },
          left: "0px",
          top: "0px"
        },
        tooltip: {
          show: true
        },
        legend: {
          show: true,
          data: [],
          "selectedMode": "multiple",
          "left": "10px",          // 放在左边
          "bottom": "10px",        // 放在底部
          "icon": "circle",        // 使用圆形图标
          "orient": "vertical",    // 竖着排列
          "itemWidth": 16,         // 图例项宽度（可选，根据需要调整）
          "itemHeight": 16,        // 图例项高度（可选，根据需要调整）
          "itemGap": 10
        },
        "toolbox": {
          "show": true,
          "feature": {
            "saveAsImage": {            // 下载为图片
              "name": "知识图谱",
              "type": "png",
              "backgroundColor": "#fff"
            },

            "restore": {                // 还原
              "title": "还原"
            },

          },
          "right": "10px",              // 放在右边
          "bottom": "10px",             // 放在底部
          "orient": "vertical",         // 竖着排列
          "itemGap": 10                 // 按钮之间的间距（可选，根据需要调整）
        },
        xAxis: {
          show: false
        },
        yAxis: {
          show: false
        },
        grid: {
          top: '80px'
        },
        series: [{
          type: "graph",
          // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          roam: true,
          // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。[ default: false ]
          focusNodeAdjacency: true,
          // 力引导布局相关的配置项，力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。
          force: {
            // 力引导布局的结果有良好的对称性和局部聚合性，也比较美观。
            // [ default: 50 ]节点之间的斥力因子(关系对象之间的距离)。支持设置成数组表达斥力的范围，此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大
            repulsion: 2000,
            // [ default: 30 ]边的两个节点之间的距离(关系对象连接线两端对象的距离,会根据关系对象值得大小来判断距离的大小)，
            edgeLength: [1000, 300]
            // 这个距离也会受 repulsion。支持设置成数组表达边长的范围，此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例:
            // 值最大的边长度会趋向于 10，值最小的边长度会趋向于 50      edgeLength: [10, 50]
          },
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [4, 10], // 分别设置起点和终点符号的大小
          lineStyle: {
            color: 'black', // 边的颜色
            width: 1,
            fontSize: 12,
            "normal": {
              "cursor": "default" // 点击边时鼠标样式为默认箭头
            }
          },
          // 图的布局。[ default: 'none' ]
          layout: "force",
          // 'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
          // 'circular' 采用环形布局;'force' 采用力引导布局.
          // 标记的图形
          symbol: 'circle',
          // 关系边的公用线条样式。其中 lineStyle.color 支持设置为'source'或者'target'特殊值，此时边会自动取源节点或目标节点的颜色作为自己的颜色。
          normal: {
            lineStyle: {
              // 线的颜色[ default: '#aaa' ]
              color: 'black',
              // 线宽[ default: 1 ]
              width: 1,
              // 线的类型[ default: solid实线 ]   'dashed'虚线    'dotted'
              type: 'solid',
              // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。[ default: 0.5 ]
              opacity: 1,
              // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。[ default: 0 ]
              curveness: 0.5
            }
          },
          // 关系对象上的标签
          label: {
            normal: {
              // 是否显示标签
              show: true,
              // 标签位置:'top''left''right''bottom''inside''insideLeft''insideRight''insideTop''insideBottom''insideTopLeft''insideBottomLeft''insideTopRight''insideBottomRight'
              position: "bottom",
              formatter: function (params) {
                // 使用 rich text 来添加背景颜色
                return '{bg|' + params.name + '}';
              },
              rich: {
                bg: {
                  padding: [3, 5], // 调整内边距
                  borderRadius: 4, // 圆角
                  backgroundColor: '#52606d', // 背景颜色
                  borderColor: '#333', // 边框颜色
                  borderWidth: 1, // 边框宽度
                  color: '#fff' // 文字颜色
                }
              },
              // 文本样式
              textStyle: {
                fontSize: 10,
                color: 'black'
              }
            }
          },
          // 连接两个关系对象的线上的标签
          edgeLabel: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 10,
                color: 'black'
              },
              // 标签内容
              formatter: function (param) {
                return param.data.category;
              }
            }
          },
          data: [{
            name: "总企业",
            draggable: true, // 节点是否可拖拽，只在使用力引导布局的时候有用。
            symbolSize: [80, 80], // 关系图节点标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
            itemStyle: {
              color: '#000' // 关系图节点标记的颜色
            },
            category: "企业分析" // 数据项所在类目的 index。
          }, {
            name: "企业1",
            draggable: true,
            symbolSize: [50, 50],
            itemStyle: {
              color: '#0000ff'
            },
            category: "入驻"
          }, {
            name: "企业2",
            draggable: true,
            symbolSize: [50, 50],
            itemStyle: {
              color: 'skyblue'
            },
            category: "培育"
          }, {
            name: "企业3",
            draggable: true,
            symbolSize: [50, 50],
            itemStyle: {
              color: '#ff0000'
            },
            category: "申报"
          }, {
            name: "企业4",
            draggable: true,
            symbolSize: [50, 50],
            itemStyle: {
              color: '#00ff00'
            },
            category: "产教融合"
          }],
          // 节点分类的类目，可选。如果节点有分类的话可以通过 data[i].category 指定每个节点的类目，类目的样式会被应用到节点样式上。图例也可以基于categories名字展现和筛选。
          categories: [{
            // 类目名称，用于和 legend 对应以及格式化 tooltip 的内容。
            name: "企业分析"
          }, {
            name: "入驻"
          }, {
            name: "培育"
          }, {
            name: "申报"
          }, {
            name: "产教融合"
          }],
          // 节点间的关系数据
          links: [{
            target: "企业1",
            source: "总企业",
            // 关系对象连接线上的标签内容
            category: "入驻"
          }, {
            target: "企业2",
            source: "总企业",
            category: "培育"
          }, {
            target: "企业3",
            source: "总企业",
            category: "申报"
          }, {
            target: "企业4",
            source: "总企业",
            category: "产教融合"
          }]

        }]
      }

    }
  },



  created() {

    this.dh = this.$route.query.dh

    if (this.dh) {

      this.dhstatus = true;
      let node = {
        type: 1,
        dh: this.dh,
        radio1: this.radio1
      }

      this.listQuery = node
      this.handleFilterdh();

    } else {
      this.dhstatus = false;
    }


  },
  methods: {

    async skip(dh) {

      const response = await questionsanswersApi("getIdBydh", { "dh": dh })
      if (response.code == 200) {
        let url = "/dashboard/docview?id=" + response.data

        window.open(url, '_blank');
      } else {
        this.$notify({
          title: '失败',
          message: "溯源失败",
          type: 'error',
          duration: 1500
        })

      }
    },

    institutionalchroniclejump() {

    },

    handleRadioChange(value) {
      console.log("选中的值已更改:", value);

      this.dh = this.$route.query.dh

      if (this.dh) {

        this.dhstatus = true;
        let node = {
          type: 1,
          dh: this.dh,
          radio1: this.radio1
        }

        this.listQuery = node
        this.handleFilterdh();

      } else {
        this.dhstatus = false;
      }



    },

    handleRadioChang2(value) {



      this.handleFilter(event)

    },

    // 绑定点击事件的方法
    bindClickEvent() {
      if (this.myChartzzt) {
        // 移除之前的点击事件监听器（如果有），避免重复绑定
        this.myChartzzt.off('click');

        // 监听 click 事件
        this.myChartzzt.on('click', (params) => {
          // if (params.dataType === 'node') {
          //   // 如果之前有选中的节点，恢复其边的颜色
          //   if (this.selectedNode) {
          //     this.resetEdgesColor();
          //   }
          //   // 更新当前选中的节点
          //   this.selectedNode = params.data;
          //   // 改变与选中节点相关的边的颜色
          //   this.highlightRelatedEdges(this.selectedNode.name);
          // }

          let node = params.data.nodeInfo
          // 你可以根据需要处理其他节点的点击事件


          if (params.dataType === 'node') {
            this.raceability(node)

            this.attributeInformation(node)
          }

        });
      }
    },

    async raceability(node) {

      console.log(node)

      let params = node
      let data = localStorage.getItem('data');
      let arr = JSON.parse(data)
      let paramsNew = {}
      paramsNew.project_id = this.project_id;
      paramsNew.id = params.id;
      paramsNew.name = params.name;
      paramsNew.type = params.type;
      const response = await artApi("raceability", paramsNew)

      if (response.code == 200) {

        this.dhtitleList = response.data
        this.nodeName = node.name
        this.type = node.type
      }


    },

    async attributeInformation(node) {

      console.log(node)

      const params = node

      let data = localStorage.getItem('data');
      let arr = JSON.parse(data)

      params.project_id = arr.id

      let paramsNew = {}

      if (this.project_id == null) {
        paramsNew.project_id = arr.id
      } else {
        paramsNew.project_id = this.project_id;
      }


      paramsNew.id = params.id;
      paramsNew.name = params.name;
      paramsNew.type = params.type;


      const response = await artApi("attributeInformation", paramsNew)

      if (response.code == 200) {

        this.tableData = response.data

      }


    },

    // 数据列表
    async handleFilter(event) {

      let data = localStorage.getItem('data');
      let arr = JSON.parse(data)
      this.listQuery.project_id = arr.id
      this.listQuery.radio2 = this.radio2

      event.preventDefault();
      const response = await artApi("getEntityJson", this.listQuery)

      if (response.code == 200) {
        this.project_id = response.project_id
        await this.$nextTick();
        this.myChartzzt = this.$echarts.init(document.getElementById('main'));

        if (response.data.length == 0) {
          this.myChartzzt.clear()
          this.myChartzzt.setOption(this.zwtp());

          return;
        }


        this.options.series[0].data = response.data.data
        this.options.series[0].links = response.data.links
        this.options.series[0].categories = response.data.category

        this.options.legend.data = response.data.cate


        // this.$nextTick(() => {

        this.myChartzzt.setOption(this.options);

        this.bindClickEvent();

        this.content = response.dh.content


        // });
      } else {
        this.options.series[0].data = []
        this.options.series[0].links = []
        this.options.series[0].categories = []
        this.options.legend.data = []
        this.myChartzzt = this.$echarts.init(document.getElementById('main'));
        this.myChartzzt.setOption(this.options);

        this.nodeName = ""
        this.type = ""
        this.dhtitleList = []
        this.tableData = []

      }
    },

    async handleFilterdh() {


      const response = await artApi("getEntityJson", this.listQuery)

      if (response.code == 200) {

        this.project_id = response.project_id

        await this.$nextTick();

        this.myChartzzt = this.$echarts.init(document.getElementById('main'));

        if (response.data.length == 0) {
          this.myChartzzt.clear()
          this.myChartzzt.setOption(this.zwtp());

          return;
        }


        this.options.series[0].data = response.data.data
        this.options.series[0].links = response.data.links
        this.options.series[0].categories = response.data.category

        this.options.legend.data = response.data.cate
        // this.$nextTick(() => {





        this.myChartzzt.setOption(this.options);


        this.bindClickEvent();

        this.content = response.dh.content


      } else {
        this.options.series[0].data = []
        this.options.series[0].links = []
        this.options.series[0].categories = []
        this.options.legend.data = []
        this.myChartzzt = this.$echarts.init(document.getElementById('main'));
        this.myChartzzt.setOption(this.options);

        this.nodeName = ""
        this.type = ""
        this.dhtitleList = []
        this.tableData = []

      }
    },


    zwtp() {
      var option = {
        title: {
          text: '暂无知识图谱',
          left: 'center',
          top: 'center',
          textStyle: {
            color: '#999',
            fontSize: 24
          }
        },
        graphic: [{
          type: 'image',
          z: 0,
          style: {
            image: 'https://img.alicdn.com/tfs/TB1YRYwQpXXXXXdaXXXXXXXXXXX-300-300.png', // 示例图片，可以替换为其他图片地址
            width: 100,
            height: 100
          },
          left: 'center',
          top: 'middle'
        }],
        xAxis: {
          show: false
        },
        yAxis: {
          show: false
        },
        series: []
      };
      return option;
    },

    // 恢复所有边的颜色
    resetEdgesColor() {
      this.options.series[0].edges.forEach(edge => {
        edge.lineStyle.color = '#ccc';
      });
      this.myChartzzt.setOption(this.options);
    },

    // 高亮与指定节点相关的边
    highlightRelatedEdges(nodeName) {
      this.options.series[0].edges.forEach(edge => {
        if (edge.source === nodeName || edge.target === nodeName) {
          edge.lineStyle.color = '#000'; // 或者其他你想要的颜色
        }
      });
      this.myChartzzt.setOption(this.options);
    },
    toggleFullScreen() {
      const elem = this.$refs.chart.$el;
      if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    }


  }
}
</script>

<style lang="scss" scoped>
.custom-font {
  color: rgba(0, 0, 0, 0.85);
  font-size: 12px;
  line-height: 1.5715;
  word-break: break-word;
  overflow-wrap: break-word;
  font-weight: normal !important;
}

.always-underlined {
  text-decoration: underline;
}

::v-deep .el-table__empty-text {
  font-weight: normal !important;
  font-size: 12px;
}

::v-deep .el-table__row {
  height: 30px; /* 设置你想要的行高 */

  td {
    padding: 5px 0;
  }
}

::v-deep .el-link--inner {
  font-size: 12px;
}

html,
body,
.app-container {
  height: 100%; /* 设置 html 和 body 以及 .app-container 的高度为 100% */
  margin: 0; /* 清除默认边距 */
}

.dhtitle {
  margin-top: 5px;
  color: #6ea3fd;
}

.myTable1 {
  background-color: #fff;
  // padding: 40px 20px 0px 20px;
}
.demo-image__preview {
  float: left;
  margin-left: 5px;
}
.demonstration {
  font-size: 12px;
  color: #333;
  font-weight: normal;
}
.bixi-group-container-title {
  color: #363b45;
  font-size: 12px;
  font-weight: 550;
  margin: -4px 0;
  margin-top: 2px;
}
.bixi-group-container-blue-block {
  background: #4d67be;
  border-radius: 0 4px 4px 0;
  display: inline-block;
  height: 12px;
  margin-right: 4px;
  position: relative;
  top: 1px;
  width: 3px;
}

.groupcontainer-title-F4sp83QczG {
  font-size: 12px;
  font-weight: 600;
}

.bixi-group-container-description {
  color: #b9bbbe;
  font-size: 12px;
  font-weight: 400;
  line-height: 30px;
  margin-left: 8px;
}

.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 设置最大显示行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  // width: 200px;
  // border: 1px solid #ccc;
  // padding: 5px;
}
</style>   
 